<template>
  <div class="account">
    <header-go-back title="账户" @back="handleGoBack" @ok="cancellationVisible = true">
      <template v-slot:text>
        <van-popover v-model:show="cancellationVisible">
        <div>注销账户</div>
          <template #reference>
            <i class="iconfont icon-gengduo"></i>
          </template>
        </van-popover>
      </template>
    </header-go-back>
    <div class="account_content">
      <div class="account_lists">
        <div class="list_item upload" @click="handleUploadAvator">
          <div class="list_item_title">头像</div>
          <img class="list_item_cover" :src="userInfo.avatar" alt="">
          <input type="file" class="input" id="input_avator" @change="handleUploadImg">
        </div>
        <div class="list_item nickname" @click="handleModifyNick">
          <div class="list_item_title">昵称</div>
          <div class="list_item_text">{{ userInfo.nickname }}</div>
        </div>
        <div class="list_item">
          <div class="list_item_title">会员</div>
          <div class="list_item_text">最普通的用户</div>
        </div>
      </div>
      <div class="account_lists margin_top">
        <div class="list_item">
          <div class="list_item_title">邮箱</div>
          <div class="list_item_text">未绑定</div>
        </div>
      </div>
      <div class="account_lists margin_top">
        <div class="list_item">
          <div class="list_item_title">微信</div>
          <div class="list_item_text">未绑定</div>
        </div>
        <div class="list_item">
          <div class="list_item_title">QQ</div>
          <div class="list_item_text">未绑定</div>
        </div>
        <div class="list_item">
          <div class="list_item_title">微博</div>
          <div class="list_item_text">未绑定</div>
        </div>
      </div>
      <div class="margin_top">
        <div class="account_button" @click="confirmVisible = true">退出登录</div>
      </div>
    </div>
    <!-- 确认退出登录弹窗 -->
    <confirmation-box 
      text="确认退出登录？" 
      :visible="confirmVisible" 
      v-if="confirmVisible" 
      @cancel="confirmVisible = false" 
      @ok="handleLogout"
    ></confirmation-box>
    <!-- 修改昵称弹窗 -->
    <confirmation-box 
      :visible="nicknameVisible" 
      v-if="nicknameVisible" 
      @cancel="nicknameVisible = false" 
      @ok="handleModifyNickname"
    >
      <template v-slot:text>
        <input type="text" v-model="nickname" class="modity_nickname">
      </template>
    </confirmation-box>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import HeaderGoBack from '@/components/common/HeaderGoBack.vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'
import { changeNickname, getStatus, logout, uploadAvator } from '@/api/user'
import ConfirmationBox from '@/components/common/ConfirmationBox.vue'
export default defineComponent({
  components: {
    HeaderGoBack,
    ConfirmationBox
  },
  setup() {
    const store = useStore()
    const router = useRouter()
    const cancellationVisible = ref(false)
    const confirmVisible = ref(false)
    const nicknameVisible = ref(false)
    const nickname = ref('')
    const userInfo = computed(() => store.state.user)
    // 返回个人中心页
    const handleGoBack = () => {
      router.push('/personal')
    }
    // 注销账户
    const handleToCancellation = () => {
      cancellationVisible.value = true
    }
    // 退出登录
    const handleLogout = () => {
      logout().then((res) => {
        if(typeof res.code === 'number' && res.code === 100) {
          alert('退出成功')
          store.commit('get_isLogin', false)
          store.commit('get_clear_store')
          localStorage.removeItem('book')
        } else {
          alert('退出失败')
        }
      })
    }
    // 更换头像
    const handleUploadAvator = () => {
      const obj = document.getElementById('input_avator')
      if(obj) {
        obj.click()
      }
    }
    // 上传头像
    // eslint-disable-next-line @typescript-eslint/no-explicit-any
    const handleUploadImg = (val: any) => {
      const input = val.target
      const files = input.files
      if(files && files[0]) {
        const file = files[0]
        if(file.size > 1024 * 1024 * 20) {
          alert('文件大小不能超过20M')
          input.value = ''
          return false
        } else {
          const formdata = new FormData()
          formdata.append('file', file)
          uploadAvator(formdata).then((res) => {
            if(typeof res.code === 'number' && res.code === 100) {
              store.commit('get_user_info', res.data)
            }
          })
        }
      }
    }
    // 打开修改昵称弹窗
    const handleModifyNick = () => {
      console.log('修改昵称');
      nicknameVisible.value = true
      nickname.value = userInfo.value.nickname
    }
    // 修改昵称
    const handleModifyNickname = () => {
      changeNickname({nickname: nickname.value}).then((res) => {
        console.log(res);
        if(typeof res.code === 'number' && res.code === 100) {
          alert('修改成功')
          nicknameVisible.value = false
          handleGetStatus()
        }
      })
    }
    // 获取用户信息
    const handleGetStatus = () => {
      getStatus().then((res) => {
        store.commit('get_user_info', res.data.user)
      })
    }
    return {
      userInfo,
      cancellationVisible,
      confirmVisible,
      nicknameVisible,
      nickname,
      handleGoBack,
      handleToCancellation,
      handleLogout,
      handleUploadAvator,
      handleUploadImg,
      handleModifyNick,
      handleModifyNickname
    }
  }
})
</script>

<style scoped>
  .account_content {
    margin: 16px;
  }
  .account_lists {
    background-color: #f9c3c233;
    padding: 0 20px;
  }
  .list_item {
    display: flex;
    height: 50px;
    align-items: center;
    justify-content: space-between;
  }
  .list_item_cover {
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }
  .list_item_text {
    color: #eb7775;
  }
  .margin_top {
    margin-top: 20px;
  }
  .account_button {
    background-color: #f9c3c233;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
  }
  .upload .input {
    display: none;
  }
  .nickname {
    position: relative;
  }
  .modity_nickname {
    height: 22px;
    padding: 4px 10px;
    border: none;
    background-color: #f9c3c233;
  }
</style>